<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转盘</title>
    <link rel="stylesheet" href="/static/wewhat/huodong/css/common_mobile.css_version=1.0.0.css">
    <link rel="stylesheet" href="/static/wewhat/huodong/css/index.css?version=1.0.0">
    <!-- 移动端适配 -->
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 10 + 'px';
        }
    </script>
</head>
 
<body>
<div id="wrap">
    <div class="caidai"></div>
    <div class="header clearfix">
        <p class="rule fl">规则</p>
        <a href="../my.html" id="myWin">
            <p class="my fr">我的奖品</p>
        </a>
        <div class="title"></div>
    </div>
    <!--轮盘-->
    <div class="rotate">
        <div class="lunpai">
            <ul class="prize running">
                {foreach $rule as $vo}
                <li>
                    <span></span>
                    <p>{$vo.prize}</p>
                </li>
                {/foreach}
            </ul>
        </div>
        <div class="ring"></div>
        <div id="btn"></div>
    </div>
    <div class="border">
        您今日还有 <span id="change"> {$zpuse.cnum} </span> 次抽奖机会
    </div>
    <!--滚动信息-->
    <div class="scroll">
        <p></p>
        <div>
            <ul>
                <li>
                    恭喜<span class="start-num">134</span>****<span class="end-num">0481</span>
                    获得<span class="info">000</span>一份
                </li>
                <li>
                    恭喜<span class="start-num">132</span>****<span class="end-num">3145</span>
                    获得<span class="info">000</span>一份
                </li>
                <li>
                    恭喜<span class="start-num">150</span>****<span class="end-num">0150</span>
                    获得<span class="info">lalalala</span>一份
                </li>
            </ul>
        </div>
    </div>
    <!--游戏规则弹窗-->
    <div id="mask-rule">
        <div class="box-rule">
            <span class="star"></span>
            <h2>活动规则说明</h2>
            <span id="close-rule"></span>
            <div class="con">
                <div class="text">
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                    <p>活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明活动规则说明</p>
                </div>
            </div>
        </div>
    </div>
    <!--中奖提示-->
    <div id="mask">
        <div class="blin"></div>
        <div class="caidai"></div>
        <div class="winning">
            <div class="red-head"></div>
            <div class="red-body"></div>
            <div id="card">
                <a href="" target="_self" class="win"></a>
            </div>
            <a href="###" target="_self" class="btn"></a>
            <span id="close"></span>
        </div>
    </div>
</div>

<script src="/static/common/jquery/jquery.min-3.3.1.js"></script>
<script src="/static/wewhat/huodong/js/jquery.rotate.js"></script>
<script src="/static/wewhat/huodong/js/h5_game_common.js_version=1.0.0"></script>

<!-- <script src="/static/wewhat/huodong/js/index.js?version=1.0.0"></script> -->

<script>
$(function () {
    let prize = '{$prize}';
    let cnum = '{$zpuse.cnum}';
    var tips = prize.split(','),//中奖提示
        $ring = $(".ring"),
        $prize = $(".prize"),//转盘
        $btn = $("#btn"),//按钮
        $change = $("#change"),//显示剩余抽奖机会
        $li = $(".scroll li"),//中奖信息滚动的盒子
        $sNum = $(".start-num"),//手机头号，三位数
        $eNum = $(".end-num"),//手机尾号，四位数
        $info = $(".info"),//中奖提示信息
        data = {count: parseInt(cnum)},//次数
        bool = false,//判断是否在旋转，true表示是，false表示否
        timer;//定时器
    init();
    function init() {
        timer = setInterval(function () {
          $ring.toggleClass("light");
        }, 1000);
    }

    //点击抽奖
    $btn.click(function () {
        
        if (bool) return; // 如果在执行就退出
        bool = true; // 标志为 在执行
        if (data.count <= 0) { //当抽奖次数为0时
            $change.html(0);//次数显示为0
            bool = false;
            alert("没有次数了");
        } else { //还有次数就执行
            data.count--;
            data.count <= 0 && (data.count = 0);
            $change.html(data.count);//显示剩余次数
            $prize.removeClass("running");
            clickFn();
        }
    });

    //随机概率
    function clickFn() {
      let chance = '{$chance}';
      let arr = chance.split(',')
      let arr1 =new Array();
      let arr2 =new Array();
      let arr3 =new Array();
      let arr4 =new Array();
      let arr5 =new Array();
      let arr6 =new Array();
      for(i = 0; i < arr[0]; i++){
        arr1[i] = 1;
      }
      for(i = 0; i < arr[1]; i++){
        arr2[i] = 2;
      }
      for(i = 0; i < arr[2]; i++){
        arr3[i] = 3;
      }
      for(i = 0; i < arr[3]; i++){
        arr4[i] = 4;
      }
      for(i = 0; i < arr[4]; i++){
        arr5[i] = 5;
      }
      for(i = 0; i < arr[5]; i++){
        arr6[i] = 6;
      }
      let data = [];
      data.push.apply(data,arr1);
      data.push.apply(data,arr2);
      data.push.apply(data,arr3);
      data.push.apply(data,arr4);
      data.push.apply(data,arr5);
      data.push.apply(data,arr6);
      // data = [1,2,3,4,5,6];//抽奖概率
      //data为随机出来的结果，根据概率后的结果
      data = data[Math.floor(Math.random() * data.length)];//1-6的随机数
      let openid = '{$zpuse.openid}';
      subAjax(data,openid);
      switch (data) {
        //中奖概率，可控。根据得到的随机数控制奖品
        case 1:
            rotateFn(1, 0, tips[0]);
            break;
        case 2:
            rotateFn(2, -60, tips[1]);
            break;
        case 3:
            rotateFn(3, -120, tips[2]);
            break;
        case 4:
            rotateFn(4, -180, tips[3]);
            break;
        case 5:
            rotateFn(5, 120, tips[4]);
            break;
        case 6:
            rotateFn(6, 60, tips[5]);
            break;
      }
    }

    function subAjax(data,openid){
      $.ajax({
        url:"{:url('wewhat/huodong.zhuanpan/chouj')}",
        data:{char:data,openid:openid},
        type:'post',
        success:function(info){
          console.log(info);
        }
      })
    }

    //选中函数。参数：奖品序号、角度、提示文字
    function rotateFn(awards, angle, text) {
      /*手机号的处理
      var arr = [13477735912, 13100656035, 15926909285];
      var a = arr[0] + "";
      var f = a.substr(0, 3);
      var l = a.substr(7, 4);*/
      bool = true;
      $prize.stopRotate();
      $prize.rotate({
        angle: 0,//旋转的角度数
        duration: 4000, //旋转时间
        animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转。也就是至少转4圈
        callback: function () {
          bool = false; // 标志为 执行完毕
          win();
          show(1, 1, text);
        }
      });
    }

    //中奖信息滚动。前两个参数为手机号前三位和后四位手机尾号，text为中的什么奖品
    function show(sNum, eNum, text) {
      //最新中奖信息
      $sNum.eq(2).html(sNum);
      $eNum.eq(2).html(eNum);
      $info.eq(2).html(text);
      $li.css("top", "-" + 40 / 75 + "rem");//滚动
      //滚动之后的处理
      setTimeout(function () {
        $li.css({
          "top": "0",
          "transition": "all 0s ease-in-out"
        });
        //更新中奖信息
        $sNum.eq(0).html($sNum.eq(1).html());
        $eNum.eq(0).html($eNum.eq(1).html());
        $info.eq(0).html($info.eq(1).html());
        $info.eq(1).html($info.eq(2).html());
        $sNum.eq(1).html($sNum.eq(2).html());
        $eNum.eq(1).html($eNum.eq(2).html());
      }, 500);
      $li.css("transition", "all 0.5s ease-in-out");
    }

    //中奖信息提示
    $("#close,.win,.btn").click(function () {
        $prize.addClass("running");
        init();
    });
});

</script>
</body>
</html>